<template>
	<div class="about">
		<el-container>
			<el-header>宏烨找房后台管理系统</el-header>
			<el-container>
				<el-aside width="200px">
					<el-row style="margin-top: 4%;">
						<el-col :span="2" :offset="2">
							<i class="el-icon-setting"></i>
						</el-col>
						<el-col :span="2" :offset="16">
							<i class="el-icon-switch-button"></i>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" :offset="8">
							<img src="../../public/3.png" alt="" width="100%">
						</el-col>
					</el-row>
					<el-row style="margin-top: 8%;">
						<el-col :span="12" :offset="6">
							{{name}} 管理员
						</el-col>
					</el-row>
					<el-menu background-color="#233046" default-active="1" text-color="#fff"
						active-text-color="#ffd04b">
						<el-menu-item index="1">
							<span slot="title">
								<router-link to="/houseing">房源管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="2">
							<span slot="title">
								<router-link to="/live">直播管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="3">
							<span slot="title">
								<router-link to="/groupbay">团购管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="4">
							<span slot="title">
								<router-link to="/audit">审核管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="5">
							<span slot="title">
								<router-link to="/order">订单管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="6">
							<span slot="title">
								<router-link to="/consult">资讯管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="7">
							<span slot="title">
								<router-link to="/broker">经纪人管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="8">
							<span slot="title">
								<router-link to="/user">用户管理</router-link>
							</span>
						</el-menu-item>
						<el-menu-item index="9">
							<span slot="title">
								<router-link to="/feedback">反馈管理</router-link>
							</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				name: this.$store.state.admin.name
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style scoped="scoped">
	.router-link-exact-active {
		color: #0099FF;
	}

	.el-header {
		background-color: #4381e6;
		color: #fff;
		font-size: 23px;
		line-height: 60px;
		text-align: left;
	}

	.el-submenu {
		text-align: center;
	}

	.el-submenu a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.el-menu-item {
		text-align: center;
	}

	.el-menu-item span {
		font-size: 15px
	}

	.el-menu-item a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.el-menu-item,
	.el-submenu__title {
		height: 70px;
		line-height: 70px;
	}

	.el-aside {
		background-color: #233046;
		height: 800px;
		color: #fff;
	}

	.el-main {
		background-color: #f5f5f5;
		color: #333;
	}
</style>
